<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>图床</title>
    <link rel="shortcut icon" href="/static/images/favicon.ico" type="image/x-icon"/>
    <link href="/static/zui/css/zui.min.css" rel="stylesheet">
    <link href="/static/zui/theme/zui-theme-green.css" rel="stylesheet">
    <script src="/static/zui/lib/jquery/jquery-3.6.0.min.js"></script>
    <script src="/static/zui/js/zui.min.js"></script>
    <!--[if lt IE 9]>
    <script src="/static/zui/lib/ieonly/html5shiv.js"></script>
    <script src="/static/zui/lib/ieonly/respond.js"></script>
    <script src="/static/zui/lib/ieonly/excanvas.js"></script>
    <![endif]-->
</head>
<body class="container">
<div class="page-header">
    <div class="collapse navbar-collapse navbar-collapse-EasyImage">
        <ul class="nav nav-pills">
            <li><a href="/"><i class="icon icon-home"></i> 首页</a></li>
            <li><a href="/list"><i class="icon icon-th"></i> 广场
                <span class="label label-badge label-primary" style="padding-top: 8px;">今日0</span></a></li>
            <li><a href="/history"><i class="icon icon-history"></i> 历史<span
                    class="label label-badge label-primary"></span></a></li>
            <li class="nav navbar-nav navbar-right hidden-xs"><a href="/admin/index.php"><i class="icon icon-user">
                登录</i></a></li>
        </ul>
    </div>

    {{template "body"}}
    <footer class="container text-muted small navbar-fixed-bottom"
            style="text-align: center;background-color:rgba(255,255,255,0.7);z-index: 0;">
        <hr>
        <p>
            <a id="dark" data-toggle="tooltip" title="暗黑模式"><i class="icon icon-lightbulb" id="dark_ico"></i></a>
            <a href="/admin/index.php" data-toggle="tooltip" title="账号登录"><i class="icon icon-user"></i></a>
        </p>
    </footer>

    <link href="/static/nprogress/nprogress.min.css" rel="stylesheet">
    <script src="/static/nprogress/nprogress.min.js"></script>
    <script type="application/javascript">
        // NProgress
        NProgress.start();
        NProgress.done();

        // 导航状态
        $('.nav-pills').find('a').each(function () {
            // console.log(document.location);
            if (this.pathname == document.location.pathname) {
                $(this).parent().addClass('active');
            }
        });

        // cookie 操作封装 https://www.jb51.net/article/94456.htm
        var cookieUtil = {
            // 设置cookie
            setItem: function (name, value, days) {
                var date = new Date();
                date.setDate(date.getDate() + days);
                document.cookie = name + '=' + value + ';expires=' + date + ';path=' + '/';
            },
            // 获取cookie
            getItem: function (name) {
                var arr = document.cookie.replace(/\s/g, "").split(';');
                for (var i = 0; i < arr.length; i++) {
                    var tempArr = arr[i].split('=');
                    if (tempArr[0] == name) {
                        return decodeURIComponent(tempArr[1]);
                    }
                }
                return '';
            },
            // 删除cookie
            removeItem: function (name) {
                this.setItem(name, '1', -1);
            },
            // 检查是否含有某cookie
            hasItem: function (name) {
                return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(name).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
            },
            // 获取全部的cookie列表
            getAllItems: function () {
                var cookieArr = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
                for (var nIdx = 0; nIdx < cookieArr.length; nIdx++) {
                    cookieArr[nIdx] = decodeURIComponent(cookieArr[nIdx]);
                }
                return cookieArr;
            }
        };

        // 暗黑操作
        let styleLabel = document.createElement('style');
        document.getElementById('dark').onclick = function () {
            if (cookieUtil.getItem('dark-mode') == null) {
                const style = 'html{filter: invert(80%) hue-rotate(180deg);} img,video {filter: invert(100%) hue-rotate(180deg);}';
                styleLabel.appendChild(document.createTextNode(style));
                document.head.appendChild(styleLabel);
                cookieUtil.setItem('dark-mode', 1, 1);
            } else {
                if (cookieUtil.getItem('dark-mode') == 1) {
                    document.head.removeChild(styleLabel);
                    cookieUtil.setItem('dark-mode', 0, 1);
                } else {
                    const style = 'html{filter: invert(80%) hue-rotate(180deg);} img,video {filter: invert(100%) hue-rotate(180deg);}';
                    styleLabel.appendChild(document.createTextNode(style));
                    document.head.appendChild(styleLabel);
                    cookieUtil.setItem('dark-mode', 1, 1);
                }
            }
        }

        if (cookieUtil.getItem('dark-mode') == 1) {
            const style = 'html{filter: invert(80%) hue-rotate(180deg);} img,video {filter: invert(100%) hue-rotate(180deg);}';
            styleLabel.appendChild(document.createTextNode(style));
            document.head.appendChild(styleLabel);
        }
        if (cookieUtil.getItem('dark-mode') == null) {
            document.head.removeChild(styleLabel);
        }

        // tips提示
        $('[data-toggle="tooltip"]').tooltip({
            tipClass: 'tooltip',
            placement: 'auto',
            html: true,
            delay: {
                show: 50,
                hide: 0.5
            }
        });
    </script>
</div>
</body>
</html>